<template>
	<view class="container">
		<!--  -->
		<u-navbar :title-bold='true' title='专业资料' :border-bottom='false'></u-navbar>
		<view class="editfile"
			@click="goTo('/sub/center/mine/preview?id='+userInfo.user_id+'&userInfo='+JSON.stringify(userInfo))">
			<span>{{userInfo.audit_msg||"请完善专业资料"}}</span>
			<!-- <u-divider bg-color='#EEE ' border-color="#fa3534" color="#fa3534">{{userInfo.audit_msg||""}}</u-divider> -->
			<view>预览资料 ></view>
		</view>

		<view class="editinfo">
			<view>日常工作照</view>
			<u-avatar @click="chooseAvatar" size='large' :src="userInfo.avatar_work"></u-avatar>
		</view>
		<u-line></u-line>
		<view class="card">
			<view class="e">专业</view>
			<view class="i">
				<u-field :border-bottom="false" v-model="userInfo.speciality" :label-width='0' placeholder="未填写"
					:field-style="{color:'#666666'}" />
			</view>
		</view>
		<u-line></u-line>
		<view class="card">
			<view class="e">主要执业机构</view>
			<view class="i">
				<u-field :border-bottom="false" v-model="userInfo.institution" :label-width='0'
					:field-style="{color:'#666666'}" placeholder="未填写" />
			</view>
		</view>
		<view class="card u-m-t-20 u-p-30">
			<view class="">
				<view class="e">执业证书</view>
				<view class="u-flex u-m-t-20">
					<image style="width: 63px;filter: blur(1px)" @click="chooseImage"
						:src="userInfo.certificate?userInfo.certificate:'../../static/img/uploadImg2.png'"
						mode="widthFix"></image>
					<view class="u-m-l-20 ">
						<view class="u-font-14 f-c-1">截图地址</view>
						<view class="u-font-13 f-c">民科微服务小程序-电子证照-申领|亮证</view>
					</view>
				</view>
			</view>

		</view>
		<view class="card work_experience">
			<view class="e">工作经历</view>
			<view class="i">
				<view class="steps">
					<view class="work" v-for="(item,index) in userInfo.work" :key="index">
						<view class="left">
							<view class="t1">
								<view class="redos">
									<view></view>
								</view>
								<text>{{item.start_time +'~'+ item.end_time }}</text>
							</view>
							<view class="t2">
								{{item.company}}
							</view>

						</view>
						<view class="right">
							<view class="r1" @click="editWork(item.id)">
								<image src="@/static/icon/edit.png" />
							</view>
							<view class="r1" @click="delAlert(item.id)">
								<image src="@/static/icon/delete.png" />
							</view>
						</view>
					</view>
				</view>
				<view class="add" @click="editWork()">
					+ 添加工作经历
				</view>
				<text class="t1">请添加您的工作经历、任职岗位等信息</text>
			</view>
		</view>

		<view class="card textarea">
			<view class="e">擅长方向</view>
			<view class="i">
				<u-field type="textarea" :height="160" :border-bottom="false" v-model="userInfo.bio" :label-width='0'
					placeholder="请填写" :field-style="{color:'#666666'}" />
			</view>
		</view>


		<view v-if="userInfo.audit!=3" @click="save()" class="btn u-m-b-20">{{userInfo.audit==4?'重新提交':'保存'}}</view>


		<u-modal v-model="show" :show-cancel-button=' true' @confirm="deleteWork" content="确认删除!"
			:mask-close-able="true"></u-modal>
		<!-- 提示 -->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		getDoctorInfo,
		editDoctorInfo,
		delWork,
		workList
	} from '@/api/index.js'
	export default {
		data() {
			return {
				userInfo: {},
				uploadAction: this.ws.upload,
				uploadFormData: new Object(),
				show: false,
				workId: -1,
				isMobile: true,
				isEmail: true,

			}
		},
		watch: {
			'userInfo.work'(res) {

			}
		},
		onLoad() {
			this.init()

		},
		onShow() {
			this.getWork()
			uni.$on('uAvatarCropper', path => {
				let that = this
				// 可以在此上传到服务端
				that.upload(path, function(res, file) {
					that.userInfo.avatar_work = res.data.fullurl
				});
			})
		},
		methods: {
			goTo(url) {
				uni.navigateTo({
					url: url
				})
			},
			init() {
				let that = this
				let user = that.ws.getUserInfo()
				getDoctorInfo({
					doctor_id: user.user_id
				}).then(res => {
					if (res.code == 1) {
						that.userInfo = res.data.info
					}
				})

			},
			getWork() {
				let that = this
				workList().then(res => {
					that.userInfo.work = res.data.list
					that.$forceUpdate()
				})
			},
			save() {
				let that = this
				editDoctorInfo(that.userInfo).then(res => {
					that.$refs.uToast.show({
						title: res.msg
					})
					if (res.code == 1) {
						that.userInfo = res.data
						// that.init()
						that.getWork()
						if (!that.userInfo.audit) {
							uni.navigateTo({
								url: '/sub/center/realnamenext'
							})
						}
					}

				})
			},
			chooseImage() {
				let that = this
				uni.chooseImage({
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.showLoading({
							title: '正在上传...'
						})
						uni.uploadFile({
							url: that.ws.upload,
							filePath: tempFilePaths[0],
							name: 'file',
							formData: {
								'user': 'certificate'
							},
							success: (uploadFileRes) => {
								let data = JSON.parse(uploadFileRes.data)
								if (data.code) {
									that.userInfo.certificate = data.data.fullurl
								} else {
									that.$refs.uToast.show({
										title: res.msg
									})
								}
							},
							complete() {
								uni.hideLoading()
							}
						});
					},

				});

			},
			// 剪裁
			chooseAvatar() {
				// 此为uView的跳转方法，详见"文档-JS"部分，也可以用uni的uni.navigateTo
				this.$u.route({
					// 关于此路径，请见下方"注意事项"
					url: '/uview-ui/components/u-avatar-cropper/u-avatar-cropper',
					// 内部已设置以下默认参数值，可不传这些参数
					params: {
						// 输出图片宽度，高等于宽，单位px
						destWidth: 300,
						// 裁剪框宽度，高等于宽，单位px
						rectWidth: 200,
						// 输出的图片类型，如果'png'类型发现裁剪的图片太大，改成"jpg"即可
						fileType: 'jpg',
					}
				})
			},

			editWork(id) {
				uni.navigateTo({
					url: 'dockerWork?id=' + id
				})
			},
			delAlert(id) {
				this.show = true
				this.workId = id
			},
			deleteWork() {
				var that = this
				delWork({
					'id': that.workId
				}).then(res => {
					uni.showToast({
						title: res.msg
					})
					that.getWork()
				})
			},


			upload(path, callBack) {
				var that = this
				uni.showLoading({
					title: '正在上传...'
				})

				const uploadTask = uni.uploadFile({
					url: that.ws.upload,
					// #ifdef APP-PLUS || H5
					file: path,
					// #endif
					filePath: path,
					name: 'file',
					formData: that.uploadFormData,
					success: (uploadFileRes) => {
						uni.hideLoading()
						let res = JSON.parse(uploadFileRes.data);
						if (res.code == 1) {
							callBack(res, path)
						} else {
							uni.showModal({
								title: '温馨提示',
								content: res.msg,
								showCancel: false
							})
						}
					},
					fail: res => {
						uni.hideLoading()
						uni.showModal({
							title: '温馨提示',
							content: '上传失败,请重试~',
							showCancel: false
						})
					},
					complete: res => {
						uni.hideLoading()
					}
				});

				// #ifndef APP-PLUS
				uploadTask.onProgressUpdate((res) => {
					uni.showLoading({
						title: res.progress + '%'
					})
				});
				// #endif
			},
		}
	}
</script>

<style lang="less">
	.container {
		background-color: #EEE;
		padding-bottom: 40px;
		font-size: 16px;
		padding-bottom: 40rpx;

		.f-c {
			color: #999;
		}

		.f-c-1 {
			color: #666;
		}

		.editfile {
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: #6EC9E1;
			padding: 40rpx;
			color: #FFF;
			letter-spacing: 2px;
		}



		.card {
			padding: 0 30rpx;
			background-color: #FFF;
			display: flex;
			align-items: center;
			min-height: 60px;

			.e {
				margin-right: 20rpx;
				width: 30vw;
				font-weight: 550;
			}

			.i {
				padding: 10rpx 0;

				text {
					opacity: 0.5;
				}
			}
		}

		.work_experience {
			padding: 30rpx;
			margin-top: 20rpx;
			flex-flow: column;
			align-items: unset !important;

			.steps {
				width: 100%;
				justify-content: flex-start;
				margin-top: 20rpx;

				.work {
					display: flex;
					justify-content: space-between;
					margin-bottom: 10px;

					.left {

						// 
						// display: flex;
						// justify-content: space-between;
						// align-items: center;
						.t2 {
							padding-left: 22px;
							font-size: 15px;
							margin-top: 20rpx;
							font-weight: 550;
						}
					}

					.right {
						display: flex;
						width: 70px;

						.r1 {
							display: flex;
							justify-content: center;
							align-items: flex-start;
							height: 100%;
							width: 50%;
						}

						image {
							height: 14px;
							width: 14px;
							margin: unset !important;
						}
					}
				}
			}

			.t1 {
				font-size: 13px;
				display: flex;
				justify-content: flex-start;
				align-items: center;

				.redos {
					border-radius: 50%;
					border: #6EC9E1 solid 1px;
					height: 14px;
					width: 14px;
					margin-right: 8px;
					display: flex;
					justify-content: center;
					align-items: center;

					view {
						height: 8px;
						width: 8px;
						border-radius: 50%;
						background-color: #6EC9E1;
					}
				}

			}

			.i {
				display: flex;
				justify-content: center;
				align-items: center;
				flex-flow: column;

				.add {
					width: 160px;
					margin: 20px 0 10px 0;
					color: #6EC9E1;
					text-align: center;
					font-size: 13px;
				}
			}
		}

		.textarea {
			margin-top: 20rpx;
			flex-flow: column;
			align-items: unset !important;
			padding: 40rpx 0 !important;

			.e {
				padding-left: 30rpx;
			}
		}

		.editinfo {
			padding: 30rpx;
			background-color: #FFF;

			view {
				display: flex;
				align-items: center;
				margin-bottom: 20rpx;
			}
		}
	}
</style>